<!-- 每一项编辑文本的组件 -->
<template>
  <NodeViewWrapper class="vue-component">
    <div contenteditable="false" class="editor_content_ele_point" @click="listen"
      @mouseenter.stop="state.isHover = true" @mouseleave.stop="state.isHover = false">
      <!-- 此项有音频, 并且仓库中的音频和此项的音频相同 -->
      <template v-if="
        !!editItem?.audio_url &&
        VideoPlayingData?.audio_url ==
        editItem?.audio_url
      ">
        <!-- 播放或暂停状态 -->
        <PauseOutlined v-if="VideoPlayingData.isPlay" style="color: #0c0d0e" />
        <CaretRightOutlined v-else style="color: #0c0d0e" />
      </template>
      <!-- 此项没有音频 或者 正在播放的音频与此项不同 -->
      <template v-else>
        <!-- 点击了此项, 进入了加载状态 -->
        <template v-if="listenLoding">
          <LoadingOutlined> </LoadingOutlined>
        </template>
        <template v-else>
          <span data-slate-zero-width="true" contenteditable="false">
            <cu-icon type="icon-dian" v-show="!state.isHover" contenteditable="false"></cu-icon>
            <cu-icon type="icon-yinliang01" style="color: #1664ff" v-show="state.isHover"
              contenteditable="false"></cu-icon>
          </span>
        </template>
        <template></template>
        <!-- hover -->
      </template>
    </div>
    <NodeViewContent class="content" />

  </NodeViewWrapper>
</template>

<script setup>
// 全局轻提示
import { message } from "ant-design-vue";
import request from "@/common/utils/request";

import { nanoid } from "nanoid";

import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
import { computed, ref, onMounted, watch, reactive } from 'vue'
import {
  LoadingOutlined,
  PauseOutlined,
  CaretRightOutlined
} from "@ant-design/icons-vue";

import { useStore } from "vuex";

import { getSsmlcontent, getAudioData_Set } from '@/views/shotstack/MuseMixedCut/utools/index.js'
import { nextTick } from "vue";
const store = useStore();

// 仓库中的字幕数据
const subTitle = computed(() => {
  return store.state.shotstack.Subtitles;
});

const props = defineProps({
  node: Object,
  editor: Object
})

// watch(() => props, (nv, ov) => {
//   console.log(nv, 'propspropspropspropspropspropspropspropspropspropspropsprops');
// }, {
//   deep: true
// })

const state = reactive({
  isHover: false
})

// 本项subtitle的id
const subId = computed(() => {
  // 如果遇到中间回车, 导致subId重复, 修改此项的subId
  const tts_index = subTitle.value[currentDrawerIndex.value.index].tts_config.findIndex(ele => ele.tts_id == tts_id.value)
  if (tts_index != -1) {
    const id = nanoid()
    const filterArr = subTitle.value[currentDrawerIndex.value.index].tts_config[tts_index].subtitle.filter(ele => ele.subtitle_id == subId.value)
    if (filterArr.length > 1) {
      props.updateAttributes({ subId: id })
    }
  }
  return props.node.attrs.subId
})

// 抽屉中编辑的字幕组的id
const tts_id = computed(() => {
  return store.state.shotstack.current_tts_id
})

// 当前编辑的项的下标
const currentDrawerIndex = computed({
  get() {
    return store.state.shotstack.currentIndex;
  }
});

// // 找到的本项数据
const editItem = computed(() => {
  const tts_index = subTitle.value[currentDrawerIndex.value.index].tts_config.findIndex(ele => ele.tts_id == tts_id.value)
  if (tts_index == -1) return null
  return subTitle.value[currentDrawerIndex.value.index].tts_config[tts_index].subtitle.find(ele => ele.subtitle_id == subId.value)
  // return subTitle.value[currentDrawerIndex.value.index].tts_config[0].subtitle.find(ele => ele.subtitle_id == props.node.attrs.subId)
})

// 当前编辑的tts项
const target_tts = computed(() => {
  return subTitle.value[currentDrawerIndex.value.index].tts_config.find(ele => ele.tts_id == tts_id.value)
})

// 仓库中的音频播放数据
const VideoPlayingData = computed(() => {
  return store.state.shotstack.VideoPlayingData
})

const isPlay = ref(false) // true => 播放中  false => 暂停中
const listenLoding = ref(false) // true => 加载中  false => 加载完成

// 没有音频链接 获取音频链接并播放
// const getAudioData_Set = async (ssmlData) => {
//   let data = {
//     text: [{
//       text: ssmlData.ssml
//     }],
//     speed: target_tts.value.speed,
//     timbre_id: target_tts.value.tone_id || null,
//     volume: target_tts.value.volume - 1,
//     emotion_category: target_tts.value.emotion_category,
//     emotion_intensity: target_tts.value.emotion_intensity,
//   };
//   listenLoding.value = true;

//   // 找到对应的数据, 存放数据
//   const setVoice = (itemVoice) => {
//     // 修改找到的对象的音频数据
//     editItem.value.audio_url = itemVoice.audio;
//     editItem.value.duration = itemVoice.duration;
//     editItem.value.material_path = itemVoice.material_path;
//     // 存储当前数据
//     store.commit("INIT_SUBTITLES_DATA", subTitle.value);
//     // 通知父组件进行播放
//     store.commit("SETVIDEOPLAYING_DATA", {
//       isPlay: true, // 是否播放
//       audio_url: itemVoice.audio,
//       reset: true, // 是否从头播放
//       changeUrl: true, // 是否修改url
//     })
//     console.log(itemVoice, '听某哥小圆点');
//     listenLoding.value = false;
//     isPlay.value = true
//   }

//   // 创建一个函数用于延迟
//   const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
//   try {
//     const res = await request.post("/work_ai", '/user/shotstack/textToVoice/many', data)
//     if (!res.result.length) {
//       throw new Error(itemVoice)
//     }
//     for (const ele of res.result) {
//       // 此项的音频没有出来, 重新轮询结果
//       if (!res.result[0].audio && res.result[0].task_id) {
//         const getItemVoice = async (id) => {
//           const itemVoice = await request.get("/work_ai", "/user/shotstack/getVoice", {
//             task_id: id,
//             request_id: ele.request_id || '',
//             save: 1
//           })
//           console.log('单项的轮询结果123', itemVoice);
//           if (itemVoice?.code && itemVoice?.code != 1000) {
//             throw new Error(itemVoice)
//           }
//           if (!!itemVoice?.result?.Data?.ResultUrl) {
//             setVoice({
//               audio: itemVoice.result.Data.ResultUrl,
//               duration: itemVoice?.result?.duration,
//               material_path: itemVoice?.result?.Data?.material_path
//             })
//           } else {
//             await delay(800)
//             await getItemVoice(id)
//           }
//         }
//         await getItemVoice(res.result[0].task_id)
//       } else {
//         setVoice({
//           audio: res.result[0].audio,
//           duration: res.result[0].duration,
//           material_path: res.result[0].material_path
//         })
//       }
//       listenLoding.value = false;
//       isPlay.value = false
//     }
//   } catch (error) {
//     listenLoding.value = false;
//     isPlay.value = false
//     message.error('字幕语音转换失败,请重试!')
//   }
// }

// 点击项
const listen = async () => {
  // 获得此项的 用于试听的ssml结构
  const ssmlData = getSsmlcontent(props.node.content.content)
  // debugger
  // return
  if (ssmlData.isEmpty || ssmlData.text == '') return message.warning("当前预览单句中存在空行或不可配音的单行文本!");
  if (listenLoding.value) return

  // 当前项的url没有清空 => 并且正在播放 => 暂停 else => 播放
  // 如果当前有音频链接
  if (editItem.value.audio_url != '') {
    // 当前播放的和本项的音频相同
    if (VideoPlayingData.value.audio_url == editItem.value.audio_url) {
      // 判断音频的播放状态
      if (VideoPlayingData.value.isPlay) {
        // 暂停
        store.commit("SETVIDEOPLAYING_DATA", {
          isPlay: false,
          audio_url: editItem.value.audio_url,
          reset: false, // 是否从头播放
          changeUrl: false, // 是否修改url
        })
        // isPlay.value = false
      } else {
        // 播放
        store.commit("SETVIDEOPLAYING_DATA", {
          isPlay: true,
          audio_url: editItem.value.audio_url,
          reset: false, // 是否从头播放
          changeUrl: false, // 是否修改url
        })
        // isPlay.value = true
      }
    } else {
      // 直接播放
      store.commit("SETVIDEOPLAYING_DATA", {
        isPlay: true,
        audio_url: editItem.value.audio_url,
        reset: true, // 是否从头播放
        changeUrl: true, // 是否修改url
      })
      // isPlay.value = true
    }
  } else {
    // 没有url => 重新获取播放链接
    getAudioData_Set({
      ssmlData, editItem, target_tts, listenLoding, subTitle, isPlay, mexid_all: false
    })
  }
};



</script>

<style lang="less" scoped>
.vue-component {
  position: relative;
  padding: 5px 20px;

  .content {
    margin: 5px 0;
  }

  .editor_content_ele_point {
    cursor: pointer;
    color: #c7ccd6;
    position: absolute;
    left: 2px;
    top: 20px;
    transform: translateY(-50%);
  }

}
</style>